<!DOCTYPE html>
<html>
    <head>
        <title>AdminDisplayToolEntity</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" type="text/css" href="../node_modules/normalize.css/normalize.css">
        <script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js"></script>
        <script type="text/javascript" src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
        <link rel="stylesheet" type="text/css" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="../node_modules/font-awesome/css/font-awesome.min.css">
        <script src="../node_modules/incubator-echarts-4.7.0/incubator-echarts-4.7.0/dist/echarts.min.js"></script>
        <link rel="shortcut icon" href="../IMG/favicon.ico"> 
    </head> 
    <body>
        <!-- 右上待提交悬浮窗 -->
        <div class="cache-box">
            <div class="cache-tab" id="cacheTab">
                <a class="cache-tab-a a-active" style="border-top-left-radius: 10px;" onclick="changeTab(this);">出库</a>
                <a class="cache-tab-a" onclick="changeTab(this);">入库</a>
                <a class="cache-tab-a" onclick="changeTab(this);">报修</a>
                <a class="cache-tab-a" style="border-top-right-radius: 10px;" onclick="changeTab(this);">报废</a>
            </div>
            <img class="cache-icon" src="../IMG/icon48.png" title="点击可隐藏悬浮窗">
            <span class="cache-title" id="cacheTitl">待提交的申请</span>
            <div class="cache-content" id="cacheCont">
                <table class="table  table-hover" id="cacheTable">
                    <thead>
                        <tr>
                            <th>代码</th>
                            <th>序列号</th>
                        </tr>
                    </thead>
                    <tbody id="outTbody"></tbody>
                    <tbody id="inTbody" style="display: none;"></tbody>
                    <tbody id="repairTbody" style="display: none;"></tbody>
                    <tbody id="scrapTbody" style="display: none;"></tbody>
                </table>
                <div>
                    <a class="btn btn-default btn-cache" href="../HTML/TempApplicationManage.html">批量处理</a>
                </div>
            </div>
        </div>
        <!--悬浮按钮-->
        <div class="dangling-box">
            <a id="danglingBack" style="display: none;"><i class="dangling-icon fa fa-arrow-up" aria-hidden="true"></i></a>
            <a id="danglingShow"><i class="dangling-icon fa fa-pie-chart" aria-hidden="true"></i></a>
        </div>
        <!-- 主体 -->
        <div class="main">
            <div class="page-header">
                <h2>夹具实体信息列表</h2>
                <!-- 操作框 -->
                <div class="oper-box">
                    <!-- 查找 -->
                    <div class="search-box input-group">
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-default dropdown-toggle" id="searchTypeBtn" data-toggle="dropdown">
                                查找方式
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a class="pointer-type" onclick="chooseSearchType(this);">按使用次数</a></li>
                                <li><a class="pointer-type" onclick="chooseSearchType(this);">按夹具状态</a></li>
                                <li><a class="pointer-type" onclick="chooseSearchType(this);">展示所有</a></li>
                            </ul>
                        </div>
                        <input type="text" class="form-control" id="paramInput">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button" id="searchBtn">查找</button>
                        </span>
                    </div>
                    <!-- 批量操作 -->
                    <div class="bulkoper-box input-group">
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-default dropdown-toggle" id="bulkOperTypeBtn" data-toggle="dropdown">
                                批量操作
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a class="pointer-type" onclick="chooseBulkOperType(this);">出库</a></li>
                                <li><a class="pointer-type" onclick="chooseBulkOperType(this);">入库</a></li>
                                <li><a class="pointer-type" onclick="chooseBulkOperType(this);">报废</a></li>
                            </ul>
                        </div>
                        <input type="text" class="form-control" id="num1Input" placeholder="序号">
                        <span class="input-group-addon" id="basic-addon1">至</span>
                        <input type="text" class="form-control" id="num2Input" placeholder="序号">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button" id="bulkOperBtn">提交</button>
                        </span>
                    </div>
                </div>                
            </div>
            <!-- 实体展示 -->
            <div class="table-box table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>夹具代码</th>
                            <th>夹具序列号</th>
                            <th>入库时间</th>
                            <th>已使用次数</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="definitionTbody"></tbody>
                </table>
            </div>
            <!-- 分页框 -->
            <div class="setPageDiv">
                <ul class="pagination" id="paginationToolEntity"></ul>
            </div>
        </div>
        
        <!-- InfoModal -->
        <div class="modal fade" id="InfoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">夹具实体详细信息</h4>
                    </div>
                    <div class="modal-body" id="modal_body">
                        <div class="infoModal-content">
                            <div class="form-group">
                                <label class="control-label" for="Code">夹具代码</label>
                                <p class="attr" id="Code"></p>
                            </div>
                            <div class="form-group">
                                <label class="control-label" for="SeqID">夹具序列号</label>
                                <p class="attr" id="SeqID"></p>
                            </div>
                            <div class="form-group">
                                <label class="control-label" for="ToolApplication">申请记录</label>
                                <a class="attr" id="ToolApplication" href="">查看该夹具申请记录</a>
                            </div>
                            <div class="form-group">
                                <label class="control-label" for="Buyoff">夹具buyoff编号</label>
                                <p class="attr" id="Buyoff"></p>
                            </div>
                            <div class="form-group">
                                <label class="control-label" for="RegDate">入库时间</label>
                                <p class="attr" id="RegDate"></p>
                            </div>
                            <div class="form-group">
                                <label class="control-label" for="UsedCount">已使用次数</label>
                                <p class="attr" id="UsedCount"></p>
                            </div>
                            <div class="form-group">
                                <label class="control-label" for="State">状态</label>
                                <p class="attr" id="State"></p>
                            </div>
                            <div class="form-group">
                                <label class="control-label" for="BillNo">采购单据号</label>
                                <p class="attr" id="BillNo"></p>
                            </div>
                            <div class="form-group">
                                <label class="control-label" for="StoreHouse">存放库位</label>
                                <select class="form-control" id="StoreHouse" style="width: 50%;display: inline-block;margin-left: 2rem;"></select>
                            </div>
                            <div class="form-group">
                                <label class="control-label" for="LastTestTime">上次点检时间</label>
                                <p class="attr" id="LastTestTime"></p>
                            </div>
                            <div class="form-group">
                                <label class="control-label" for="TotalUsedTime">总使用时长</label>
                                <p class="attr" id="TotalUsedTime"></p>
                            </div>
                            <div class="form-group">
                                <label class="control-label" for="Image">夹具图片</label>
                                <div class="img-box"><img id="Image"></div>
                            </div>
                            <button type="button" class="btn btn-primary col-sm-offset-9 col-xs-offset-2" id="EditBtn">确认修改</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- RepairModal -->
        <div class="modal fade" id="RepairModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">加入报修申请</h4>
                    </div>
                    <div class="modal-body" id="modal_body">
                        <form class="form-horizontal" id="repairForm" enctype="multipart/form-data">
                            <div class="form-group">
                                <span class="help-block col-sm-offset-3">故障类型与故障描述将在待提交申请处理页面填写</span>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-3" for="repairCode">夹具代码</label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="text" id="repairCode" name="Code" disabled>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-3" for="repairSeqID">夹具序列号</label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="text" id="repairSeqID" name="SeqID" disabled> 
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-3" for="repairImageInput">故障图片</label>
                                <div class="col-sm-8">
                                    <input type="file" id="repairImageInput" name="Image">
                                </div>
                                <div class="img-box"><img id="repairImage"><span class="imageScan"><i>图片预览</i></span></div>
                            </div>
                            <div class="form-group">
                                <button class="btn btn-primary repair-btn" id="repairBtn">确认提交</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- 当前夹具状态饼图 -->
        <div class="modal fade bs-example-modal-sm" id="ToolStateChartModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">当前夹具一览</h4>
                    </div>
                    <div class="modal-body" id="modal_body">
                        <div id="ToolStateChart" style="height: 250px; width: 550px;"></div>
                    </div>
                </div>
            </div>
        </div>
        
        <link href="../CSS/ToolEntityDisplay.css" rel="stylesheet" type="text/css">
        <script src="../node_modules/jqPaginator-2.0.2/dist/jq-paginator.js"></script>
        <script src="../JS/AdminToolEntityDisplay.js"></script>

    </body>
</html>